<#include "../common/macro.ftl">
<@page>
<body>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>组件</cite></a>
        <a><cite>数据表格</cite></a>
        <a><cite>开启复选框</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs6">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">接修响应时间</div>
                        <div class="layui-card-body">

                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                                <div id="card1" style="height:100%; width: 100%" ></div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">工程师到场时间</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                            <div id="card2" style="height:100%; width: 100%" ></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">配件到场时间</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                            <div id="card3" style="height:100%; width: 100%" ></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">完成修复时间</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                            <div id="card4" style="height:100%; width: 100%" ></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">故障间隔时间</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                            <div id="card5" style="height:100%; width: 100%" ></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="layui-row layui-col-space15">

        <div class="layui-col-xs6" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">有评价工单/工单数</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                            <div id="card6" style="height:100%; width: 100%" ></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">整体满意度得分</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                            <div id="card7" style="height:100%; width: 100%" ></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">响应速度得分</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                            <div id="card8" style="height:100%; width: 100%" ></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">到场时间得分</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                            <div id="card9" style="height:100%; width: 100%" ></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">维修价格得分</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                            <div id="card10" style="height:100%; width: 100%" ></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs6" >
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">维修效率得分</div>
                    <div class="layui-card-body">

                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                            <div id="card11" style="height:100%; width: 100%" ></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>

</@page>

<script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.js"></script>
<script>
    layui.config({
        base: '${static}/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function(){
        var table = layui.table;
    });
</script>
<script>
                // 基于准备好的dom，初始化echarts图表
                var myChart = echarts.init(document.getElementById('card1'));
                var myChart2 = echarts.init(document.getElementById('card2'));
                var myChart3 = echarts.init(document.getElementById('card3'));
                var myChart4 = echarts.init(document.getElementById('card4'));
                var myChart5 = echarts.init(document.getElementById('card5'));
                var myChart6 = echarts.init(document.getElementById('card6'));
                var myChart7 = echarts.init(document.getElementById('card7'));
                var myChart8 = echarts.init(document.getElementById('card8'));
                var myChart9 = echarts.init(document.getElementById('card9'));
                var myChart10 = echarts.init(document.getElementById('card10'));
                var myChart11 = echarts.init(document.getElementById('card11'));



                var input = {};
                input.topicType = 4;//接修响应时间
                medatc('topicCount/countData', input, function (result) {
                    option = getOption('接修响应时间（h）', result.names, result.values);
                    myChart.setOption(option);

                });
                input.topicType = 5;//工程师到场时间
                medatc('topicCount/countData', input, function (result) {
                    myChart2.setOption(getOption('工程师到场时间（h）', result.names, result.values));

                });

                input.topicType = 6;//配件到场时间
                medatc('topicCount/countData', input, function (result) {
                    myChart3.setOption(getOption('配件到场时间（h）', result.names, result.values));

                });

                input.topicType = 7;//完成修复时间
                medatc('topicCount/countData', input, function (result) {
                    myChart4.setOption(getOption('完成修复时间（h）', result.names, result.values));

                });

                input.topicType = 8;//故障间隔时间
                medatc('topicCount/countData', input, function (result) {
                    myChart5.setOption(getOption('故障间隔时间（h）', result.names, result.values));

                });

                //有评价工单/工单数
                var specialCountTypeInput = {};
                specialCountTypeInput.specialCountType = 2;
                medatc('topicCount/specialCountData', specialCountTypeInput, function (result) {
                    myChart6.setOption(getSpecialCountOption('有评价工单数', '工单数', result.names, result.v1, result.v2));
                });

                input.topicType = 9;//整体满意度得分
                medatc('topicCount/countData', input, function (result) {
                    myChart7.setOption(getOption('整体满意度得分', result.names, result.values));

                });

                input.topicType = 10;//响应速度得分
                medatc('topicCount/countData', input, function (result) {
                    myChart8.setOption(getOption('响应速度得分', result.names, result.values));

                });

                input.topicType = 11;//到场时间得分
                medatc('topicCount/countData', input, function (result) {
                    myChart9.setOption(getOption('到场时间得分', result.names, result.values));

                });

                input.topicType = 13;//维修价格得分
                medatc('topicCount/countData', input, function (result) {
                    myChart10.setOption(getOption('维修价格得分', result.names, result.values));

                });

                input.topicType = 12;//维修效率得分
                medatc('topicCount/countData', input, function (result) {
                    myChart11.setOption(getOption('维修效率得分', result.names, result.values));

                });
                function getOption(yTitle, names, values) {
                    var option = {
                        grid: {
                            x: '40px',
                            y: '50px',
                            width: '95%'
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:[yTitle],
                            show: false
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : names
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:yTitle,
                                type:'bar',
                                data:values,
                                barWidth : 24,
                                label:{
                                    show: true,
                                    position: 'top'
                                },
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            var colorList = [
                                                'rgba(32,160,255,0.85)', 'rgba(247,186,42,0.85)', 'rgba(19,206,102,0.85)', 'rgba(255,73,73,0.85)',
                                                'rgba(19,194,194,0.85)', 'rgba(150,86,238,0.85)', 'rgba(250,136,32,0.85)', 'rgba(246,83,161,0.85)', 'rgba(93,213,0,0.85)'
                                            ];
                                            return colorList[params.dataIndex]
                                        }
                                    }
                                }
                            }
                        ]
                    };
                    return option;
                }

                function getSpecialCountOption(yTitle1, yTitle2, names, values1, values2) {
                    var option = {
                        grid: {
                            x: '40px',
                            y: '50px',
                            width: '95%'
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:[yTitle1,yTitle2],
                            show: false
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : names
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name: yTitle1,
                                type: 'bar',
                                data: values1,
                                barWidth : 24,
                                label:{
                                    show: true,
                                    position: 'top'
                                },
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            var colorList = [
                                                'rgba(32,160,255,0.85)', 'rgba(247,186,42,0.85)', 'rgba(19,206,102,0.85)', 'rgba(255,73,73,0.85)',
                                                'rgba(19,194,194,0.85)', 'rgba(150,86,238,0.85)', 'rgba(250,136,32,0.85)', 'rgba(246,83,161,0.85)', 'rgba(93,213,0,0.85)'
                                            ];
                                            return colorList[params.dataIndex]
                                        }
                                    }
                                }
                            },
                            {
                                name: yTitle2,
                                type: 'bar',
                                data: values2,
                                barWidth : 24,
                                label:{
                                    show: true,
                                    position: 'top'
                                },
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            var colorList = [
                                                'rgba(19,194,194,0.85)', 'rgba(150,86,238,0.85)', 'rgba(250,136,32,0.85)', 'rgba(246,83,161,0.85)', 'rgba(93,213,0,0.85)',
                                                'rgba(32,160,255,0.85)', 'rgba(247,186,42,0.85)', 'rgba(19,206,102,0.85)', 'rgba(255,73,73,0.85)'
                                            ];
                                            return colorList[params.dataIndex]
                                        }
                                    }
                                }
                            }

                        ]
                    };
                    return option;
                }
</script>
</body>
</html>